Catálogo de recursos ivanlabs

Definición o concepto clave aislado, aviso o «importante»: es el componente más simple y el que fija el patrón de la librería.

Tres o más puntos relacionados que conviene plegar: glosario, partes de una interfaz, preguntas frecuentes, con teclado y ARIA de serie.

Compara dos o tres alternativas lado a lado, con identificadores únicos por instancia que eliminan el bug de los paneles repetidos.

De dos a cuatro datos breves con reverso: delante el título y un icono, detrás la explicación, operables por teclado como botones de verdad.

Una secuencia que se recorre de una en una: cronología, pasos, la lista de lo que vas a aprender, con flechas que se desactivan de verdad.

Un conjunto de imágenes con su pie, navegables una a una: la hermana del carrusel, con indicadores de posición que son botones.

Una captura o esquema que se ve pequeño y hay que poder mirar de cerca, con trampa de foco, cierre con Escape y al pulsar el fondo.

Una narración o pista asociada a un tema, sin identificadores fijos, así que dos reproductores pueden convivir en la misma página.

Bloque de enlaces externos al final de un tema, para quien quiera tirar del hilo por su cuenta.

Una idea explicada al lado de su imagen: puro layout, sin estado ni comportamiento, con el lado cambiado por orden y no por marcado.

Reparte una plantilla descargable (un .docx o un .pdf) desde dentro del curso, con la meta fuera del botón.

La evaluación de cierre del curso: opciones en un radiogroup real, feedback que sí se pinta y resultado anunciado.

Relaciona cada concepto con su definición: pulsa uno y luego el otro, arrastra o usa el teclado. La pareja acertada queda marcada y el curso cuenta la interacción.

Una situación real con dos o tres salidas; cada elección lleva a su consecuencia y, desde ahí, a la siguiente decisión. Es el único recurso del catálogo que evalúa criterio y no recuerdo: el resto comprueba si te acuerdas de algo, este pregunta qué harías.

El alumno se valora sobre 3-5 criterios, eligiendo un nivel en cada uno, y recibe una devolución orientativa por tramo. No puntúa: orienta. Cierra bien una píldora de competencias donde un test de opción única no encaja.

Comparar dos o más opciones por criterios. En móvil deja de ser una tabla: cada fila se convierte en un bloque con sus pares «opción: valor», con un solo marcado (no dos que puedan desincronizarse). Cabeceras con scope de serie.

Un comando o un fragmento de configuración con botón de copiar. Si el navegador no deja copiar —pasa dentro del iframe de Moodle— lo dice, en vez de dejar un botón mudo. Sin coloreado de sintaxis a propósito: lo que ayuda es señalar la línea que importa, no pintar las palabras clave.

Rellena las palabras clave de un párrafo arrastrando fichas de un banco (con distractores), pulsando ficha→hueco o con teclado. Se pueden sacar fichas para corregir; «Comprobar» valida todos los huecos a la vez.

Coloca pasos barajados en su orden correcto, arrastrándolos o con botones Subir/Bajar operables por teclado. «Comprobar» valida la secuencia con feedback por ficha.

Cronología vertical navegable: cada hito se expande tipo acordeón para mostrar su detalle, con ARIA sincronizado, nodos marcados como vistos y región de progreso «N de M».

Icono 3D que el alumno gira 360° arrastrando o con las flechas del slider, con inercia y degradado a imagen fija si el JS no corre. Fotogramas pre-renderizados, offline y seguro para SCORM.

Diálogo que exige confirmar una acción que no se puede deshacer, como enviar el test. Foco atrapado, cierre con Escape y retorno del foco, de Radix sin escribir nada a mano.

Barra de «cuánto queda», con etiqueta siempre visible. Extraída de Test, que la dibujaba a mano: segunda vez que hacía falta la misma pieza.

Metadato de un vistazo sobre una tarjeta de recurso: «Nuevo», «SCORM 1.2», «18 min». No interactiva, seis tonos ya medidos contra AA.

Aclara un término técnico al pasar el ratón o al enfocar, sin salir de la frase. No es SaberMas ni un Modal: es una ayuda de paso, opcional por definición.

Chasis por defecto de una píldora: navegación lateral por temas con bloqueo progresivo. La base de casi todos los cursos.

Chasis alternativo: paneles a pantalla completa con scroll vertical (abajo = siguiente, arriba = anterior). Reutiliza los mismos componentes.

Navegación tipo tablero: casillas que se desbloquean al completar (scroll + interacción), con test por módulo. Da un aire de juego al curso entero. La plantilla trae 3 lecciones de ejemplo, webgrafía y evaluación; el tablero es dinámico, así que añades o quitas casillas sin tocar el JS.

Quiz gamificado con estética de combate por turnos: puntos de vida, sprites, feedback por pregunta. Se empaqueta como SCORM propio. Ya se usa en el curso de Gamificación. Única excepción de la librería: sigue siendo HTML+JS a mano, porque su lógica de combate y sus sprites no ganan nada al pasarlos a React.

De dónde salen las imágenes al maquetar. 1556 ilustraciones SVG en el repo (offline, uso comercial sin atribución) que se copian al curso ya recoloreadas al azul IvanLabs, más fotos Creative Commons de Openverse en .webp con su licencia registrada. Se usa desde _scripts/banco_visual.py; el buscador entiende español.

Cada pista es una definición con un hueco: el alumno deduce el término y lo busca en la cuadrícula (5 palabras, solo horizontal o vertical). Al acertar, la palabra se subraya y se revela en verde junto a su definición. Repaso activo de conceptos, no solo de vocabulario.

El punto de partida de cualquier vídeo nuevo: describes las escenas como una lista de datos y él las encadena con sus fundidos, la locución y los subtítulos. La duración total se calcula, no se escribe — que era de donde salían los vídeos cortados o con cola negra.

Para ABRIR cualquier vídeo. Tres segundos de identidad antes del contenido, para que se sepa de dónde sale la pieza aunque llegue suelta por WhatsApp. Úsala siempre la primera; nunca en medio.

La escena de trabajo: idea a la izquierda, apoyo visual a la derecha. Es la que más se usa, y por eso la que antes cansa — alterna con dato o comparación cada dos o tres escenas.

Una cifra ocupa la pantalla y cuenta desde cero. Para el gancho de apertura o para romper una racha de escenas de texto. El campo de la fuente es obligatorio: un dato sin fuente resta credibilidad en vez de sumarla.

Dos columnas enfrentadas: antes/después, mito/hecho, lo que se dice/lo que se hace. Cada lado lleva su rótulo e icono, así que la diferencia no depende solo del verde y el rojo.

Para CERRAR. La marca otra vez y, sobre todo, el «qué hago ahora» de quien acaba de verlo. Un vídeo formativo que termina sin decir el siguiente paso desaprovecha su mejor momento.

Halos de marca que derivan despacio, para que una escena quieta no parezca una diapositiva congelada. Va como primer hijo de la escena, siempre por debajo del texto: es ambiente, no protagonista.

Azul de marca con una trama que se desplaza a velocidad constante y sin costura, con el contenido delante. A diferencia del fondo decorativo, no es el ambiente de una escena: se pone en el chasis y da un fondo continuo al vídeo entero, que ya no se corta en las transiciones. Cuatro tramas: ondas, rejilla, malla y franjas.

Barras que se mueven con la locución de verdad, no una animación que finge seguirla. Para que se VEA quién habla en una escena que por lo demás está quieta. Si no aporta esa información, es adorno: no la pongas.

Un icono de Icono3D levantado como geometría real dentro de la escena, no como imagen pegada: el ángulo, el giro y la luz se cambian con un número. Como mucho uno por vídeo, y con una silueta que se reconozca desde cualquier ángulo.

Obligatorios en todo vídeo con locución: sin ellos, quien no oye —o lo ve sin sonido— se queda fuera. Se generan solos desde la voz con Whisper (scripts/transcribir.mjs) y esta capa los pinta con contraste alto.

Para enseñar una herramienta paso a paso. El zoom NO va cocido en la grabación: se calcula al renderizar a partir de dónde se pulsó, así que ajustar su fuerza o su ritmo no obliga a volver a grabar.

Quiz de opción única disfrazado de penalti: las 4 opciones son las 4 escuadras de la portería. Apuntas a una zona (la respuesta) y calibras la fuerza con una barra que sube y baja — muy fuerte se va fuera, muy floja no llega (repites); en verde, zona correcta = gol y zona incorrecta = parada del portero. Suma pericia a saber la respuesta. Modo sin puntería para teclado y reduce-motion.